<div class="content-section introduction">
    <div class="feature-intro">
        <h1>Galleria</h1>
        <p>Galleria is an advanced content gallery component.</p>
    </div>
</div>

<div class="content-section implementation">
    <div class="card">
        <p-galleria [(value)]="images" [responsiveOptions]="responsiveOptions" [containerStyle]="{'max-width': '640px'}" [numVisible]="5"> 
            <ng-template pTemplate="item" let-item>
                <img [src]="item.previewImageSrc" style="width: 100%;" />
            </ng-template>
            <ng-template pTemplate="thumbnail" let-item>
                <div class="p-grid p-nogutter p-justify-center">
                    <img [src]="item.thumbnailImageSrc" />
                </div>
            </ng-template>
        </p-galleria>
    </div>
</div>

<div class="content-section documentation">
    <p-tabView>
        <p-tabPanel header="Documentation">
            <h5>Import</h5>
<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
import &#123;GalleriaModule&#125; from 'primeng/galleria';
</app-code>

            <h5>Getting Started</h5>
            <p>Galleria requires item template and a value as an array of objects</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-galleria [value]="images"&gt;
    &lt;ng-template pTemplate="item" let-item&gt;
        &lt;img [src]="item.previewImageSrc" [alt]="item.alt" /&gt;
    &lt;/template&gt;
&lt;/p-galleria&gt;
</app-code>
            <p>For the rest of the documentation, sample data below would be return from an example service e.g. PhotoService.</p>
<div style="overflow: auto; height: 400px; margin-bottom: 1em;">
<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
&#123;
    "data":[
        &#123;
            "previewImageSrc": "demo/images/galleria/galleria1.jpg",
            "thumbnailImageSrc": "demo/images/galleria/galleria1s.jpg",
            "alt": "Description for Image 1",
            "title": "Title 1"
        &#125;,
        &#123;
            "previewImageSrc": "demo/images/galleria/galleria2.jpg",
            "thumbnailImageSrc": "demo/images/galleria/galleria2s.jpg",
            "alt": "Description for Image 2",
            "title": "Title 2"
        &#125;,
        &#123;
            "previewImageSrc": "demo/images/galleria/galleria3.jpg",
            "thumbnailImageSrc": "demo/images/galleria/galleria3s.jpg",
            "alt": "Description for Image 3",
            "title": "Title 3"
        &#125;,
        &#123;
            "previewImageSrc": "demo/images/galleria/galleria4.jpg",
            "thumbnailImageSrc": "demo/images/galleria/galleria4s.jpg",
            "alt": "Description for Image 4",
            "title": "Title 4"
        &#125;,
        &#123;
            "previewImageSrc": "demo/images/galleria/galleria5.jpg",
            "thumbnailImageSrc": "demo/images/galleria/galleria5s.jpg",
            "alt": "Description for Image 5",
            "title": "Title 5"
        &#125;,
        &#123;
            "previewImageSrc": "demo/images/galleria/galleria6.jpg",
            "thumbnailImageSrc": "demo/images/galleria/galleria6s.jpg",
            "alt": "Description for Image 6",
            "title": "Title 6"
        &#125;,
        &#123;
            "previewImageSrc": "demo/images/galleria/galleria7.jpg",
            "thumbnailImageSrc": "demo/images/galleria/galleria7s.jpg",
            "alt": "Description for Image 7",
            "title": "Title 7"
        &#125;,
        &#123;
            "previewImageSrc": "demo/images/galleria/galleria8.jpg",
            "thumbnailImageSrc": "demo/images/galleria/galleria8s.jpg",
            "alt": "Description for Image 8",
            "title": "Title 8"
        &#125;,
        &#123;
            "previewImageSrc": "demo/images/galleria/galleria9.jpg",
            "thumbnailImageSrc": "demo/images/galleria/galleria9s.jpg",
            "alt": "Description for Image 9",
            "title": "Title 9"
        &#125;,
        &#123;
            "previewImageSrc": "demo/images/galleria/galleria10.jpg",
            "thumbnailImageSrc": "demo/images/galleria/galleria10s.jpg",
            "alt": "Description for Image 10",
            "title": "Title 10"
        &#125;,
        &#123;
            "previewImageSrc": "demo/images/galleria/galleria11.jpg",
            "thumbnailImageSrc": "demo/images/galleria/galleria11s.jpg",
            "alt": "Description for Image 11",
            "title": "Title 11"
        &#125;,
        &#123;
            "previewImageSrc": "demo/images/galleria/galleria12.jpg",
            "thumbnailImageSrc": "demo/images/galleria/galleria12s.jpg",
            "alt": "Description for Image 12",
            "title": "Title 12"
        &#125;,
        &#123;
            "previewImageSrc": "demo/images/galleria/galleria13.jpg",
            "thumbnailImageSrc": "demo/images/galleria/galleria13s.jpg",
            "alt": "Description for Image 13",
            "title": "Title 13"
        &#125;,
        &#123;
            "previewImageSrc": "demo/images/galleria/galleria14.jpg",
            "thumbnailImageSrc": "demo/images/galleria/galleria14s.jpg",
            "alt": "Description for Image 14",
            "title": "Title 14"
        &#125;,
        &#123;
            "previewImageSrc": "demo/images/galleria/galleria15.jpg",
            "thumbnailImageSrc": "demo/images/galleria/galleria15s.jpg",
            "alt": "Description for Image 15",
            "title": "Title 15"
        &#125;
    ]
&#125;
</app-code>
</div>
<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
@Injectable()
export class PhotoService &#123;

    constructor(private http: HttpClient) &#123; &#125;

    getImages() &#123;
    return this.http.get&lt;any&gt;('assets/showcase/data/photos.json')
      .toPromise()
      .then(res =&gt; &lt;Image[]&gt;res.data)
      .then(data =&gt; &#123; return data; &#125;);
    &#125;
&#125;
</app-code>
<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
export class GalleriaDemo implements OnInit &#123;

    images: any[];

    constructor(private photoService: PhotoService) &#123; &#125;

    responsiveOptions:any[] = [
        &#123;
            breakpoint: '1024px',
            numVisible: 5
        &#125;,
        &#123;
            breakpoint: '768px',
            numVisible: 3
        &#125;,
        &#123;
            breakpoint: '560px',
            numVisible: 1
        &#125;
    ];
    ngOnInit() &#123;
        this.photoService.getImages().then(images =&gt; this.images = images);
    &#125;
&#125;
</app-code>
            <h5>Items per page</h5>
            <p>Number of items per page is defined using the <i>numVisible</i> property.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-galleria [value]="images" [numVisible]="5"&gt;
    &lt;ng-template pTemplate="item" let-item&gt;
        &lt;img [src]="item.previewImageSrc" [alt]="item.alt" /&gt;
    &lt;/template&gt;
    &lt;ng-template pTemplate="thumbnail" let-item&gt;
        &lt;div class="p-grid p-nogutter p-justify-center"&gt;
            &lt;img [src]="item.thumbnailImageSrc" /&gt;
        &lt;/div&gt;
    &lt;/ng-template&gt;
&lt;/p-galleria&gt;
</app-code>

            <h5>Responsive</h5>
            <p>For responsive design, <i>numVisible</i> can be defined using the <i>responsiveOptions</i> property that should be an array of
                objects whose breakpoint defines the max-width to apply the settings.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-galleria [(value)]="images" [responsiveOptions]="responsiveOptions" [numVisible]="5"&gt; 
    &lt;ng-template pTemplate="item" let-item&gt;
        &lt;img [src]="item.previewImageSrc" style="width: 100%; display: block;"/&gt;
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate="thumbnail" let-item&gt;
        &lt;div class="p-grid p-nogutter p-justify-center"&gt;
            &lt;img [src]="item.thumbnailImageSrc" style="display: block;"/&gt;
        &lt;/div&gt;
    &lt;/ng-template&gt;
&lt;/p-galleria&gt;
</app-code>
<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
responsiveOptions:any[] = [
    &#123;
        breakpoint: '1024px',
        numVisible: 5
    &#125;,
    &#123;
        breakpoint: '768px',
        numVisible: 3
    &#125;,
    &#123;
        breakpoint: '560px',
        numVisible: 1
    &#125;
];
</app-code>

            <h5>Header and Footer</h5>
            <p>Custom content projection is available using the <i>header</i> and <i>footer</i> properties.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-galleria [(value)]="images" [responsiveOptions]="responsiveOptions" [containerStyle]="&#123;'max-width': '520px'" [numVisible]="5"&gt; 
    &lt;ng-template pTemplate="header"&gt;
        &lt;h1&gt;
            Header
        &lt;/h1&gt;
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate="item" let-item&gt;
        &lt;img [src]="item.previewImageSrc" style="width: 100%;" /&gt;
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate="thumbnail" let-item&gt;
        &lt;div class="p-grid p-nogutter p-justify-center"&gt;
            &lt;img [src]="item.thumbnailImageSrc" /&gt;
        &lt;/div&gt;
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate="header"&gt;
        &lt;h1&gt;
            Footer
        &lt;/h1&gt;
    &lt;/ng-template&gt;
&lt;/p-galleria&gt;
</app-code>
                <h5>Indicators</h5>
                <p>Indicators allow quick navigation between the items. Set <i>showIndicators</i> to display indicators which can be customized further
                with the <i>changeItemOnIndicatorHover</i>, <i>showIndicatorsOnItem</i> and <i>indicatorsPosition</i> properties.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-galleria [value]="images" [indicators]="true"&gt;
    &lt;ng-template pTemplate="item" let-item&gt;
        &lt;img [src]="item.previewImageSrc" [alt]="item.alt" /&gt;
    &lt;/template&gt;
&lt;/p-galleria&gt;
</app-code>
            <h5>Properties</h5>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Type</th>
                            <th>Default</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>id</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Unique identifier of the element.</td>
                        </tr>
                        <tr>
                            <td>value</td>
                            <td>array</td>
                            <td>null</td>
                            <td>An array of objects to display.</td>
                        </tr>
                        <tr>
                            <td>activeIndex</td>
                            <td>number</td>
                            <td>0</td>
                            <td>Index of the first item.</td>
                        </tr>
                        <tr>
                            <td>fullScreen</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>Whether to display the component on fullscreen.</td>
                        </tr>
                        <tr>
                            <td>visible</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>Specifies the visibility of the mask on fullscreen mode.</td>
                        </tr>
                        <tr>
                            <td>numVisible</td>
                            <td>number</td>
                            <td>3</td>
                            <td>Number of items per page.</td>
                        </tr>
                        <tr>
                            <td>responsiveOptions</td>
                            <td>any</td>
                            <td>null</td>
                            <td>An array of options for responsive design.</td>
                        </tr>
                        <tr>
                            <td>showItemNavigators</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>Whether to display navigation buttons in preview container.</td>
                        </tr>
                        <tr>
                            <td>showThumbnailNavigators</td>
                            <td>boolean</td>
                            <td>true</td>
                            <td>Whether to display navigation buttons in thumbnail container.</td>
                        </tr>
                        <tr>
                            <td>showItemNavigatorsOnHover</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>Whether to display navigation buttons on preview container's hover.</td>
                        </tr>
                        <tr>
                            <td>changeItemOnIndicatorHover</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>When enabled, preview item is changed on indicator item's hover.</td>
                        </tr>
                        <tr>
                            <td>circular</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>Defines if scrolling would be infinite.</td>
                        </tr>
                        <tr>
                            <td>autoPlay</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>Items are displayed with a slideshow in autoPlay mode.</td>
                        </tr>
                        <tr>
                            <td>transitionInterval</td>
                            <td>number</td>
                            <td>4000</td>
                            <td>Time in milliseconds to scroll items.</td>
                        </tr>
                        <tr>
                            <td>showThumbnails</td>
                            <td>boolean</td>
                            <td>true</td>
                            <td>Whether to display thumbnail container.</td>
                        </tr>
                        <tr>
                            <td>thumbnailsPosition</td>
                            <td>string</td>
                            <td>bottom</td>
                            <td>Position of thumbnails. Valid values are "bottom", "top", "left" and "right".</td>
                        </tr>
                        <tr>
                            <td>verticalThumbnailViewPortHeight</td>
                            <td>string</td>
                            <td>300px</td>
                            <td>Height of the viewport in vertical thumbnail.</td>
                        </tr>
                        <tr>
                            <td>showIndicators</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>Whether to display indicator container.</td>
                        </tr>
                        <tr>
                            <td>showIndicatorsOnItem</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>When enabled, indicator container is displayed on preview container.</td>
                        </tr>
                        <tr>
                            <td>indicatorsPosition</td>
                            <td>string</td>
                            <td>bottom</td>
                            <td>Position of indicators. Valid values are "bottom", "top", "left" and "right".</td>
                        </tr>
                        <tr>
                            <td>baseZIndex</td>
                            <td>number</td>
                            <td>0</td>
                            <td>Base zIndex value to use in layering.</td>
                        </tr>
                        <tr>
                            <td>maskClass</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Style class of the mask on fullscreen mode.</td>
                        </tr>
                        <tr>
                            <td>containerStyle</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Inline style of the component on fullscreen mode. Otherwise, the 'style' property can be used.</td>
                        </tr>
                        <tr>
                            <td>galleriaClass</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Style class of the component on fullscreen mode. Otherwise, the 'class' property can be used.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Styling</h5>
            <p>Following is the list of structural style classes, for theming classes visit <a href="#" [routerLink]="['/theming']">theming page</a>.</p>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Element</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>p-galleria</td>
                            <td>Container element.</td>
                        </tr>
                        <tr>
                            <td>p-galleria-header</td>
                            <td>Header section.</td>
                        </tr>
                        <tr>
                            <td>p-galleria-footer</td>
                            <td>Footer section.</td>
                        </tr>
                        <tr>
                            <td>p-galleria-item-wrapper</td>
                            <td>Preview content element. It contains preview and indicator containers.</td>
                        </tr>
                        <tr>
                            <td>p-galleria-item-container</td>
                            <td>Container of the preview content. It contains navigation buttons, preview item and caption content.</td>
                        </tr>
                        <tr>
                            <td>p-galleria-indicators</td>
                            <td>Container of the indicators. It contains indicator items.</td>
                        </tr>
                        <tr>
                            <td>p-galleria-thumbnail-wrapper</td>
                            <td>Thumbnail content element.</td>
                        </tr>
                        <tr>
                            <td>p-galleria-thumbnail-container</td>
                            <td>Container of the thumbnail content. It contains navigation buttons and thumbnail items.</td>
                        </tr>
                        <tr>
                            <td>p-galleria-caption</td>
                            <td>Content of the preview caption.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Dependencies</h5>
            <p>None.</p>
        </p-tabPanel>

        <p-tabPanel header="Source">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/galleria" class="btn-viewsource" target="_blank">
                <span>View on GitHub</span>
            </a>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-galleria [(value)]="images" [responsiveOptions]="responsiveOptions" [containerStyle]="&#123;'max-width': '640px'&#125;" [numVisible]="5"&gt; 
    &lt;ng-template pTemplate="item" let-item&gt;
        &lt;img [src]="item.previewImageSrc" style="width: 100%;" /&gt;
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate="thumbnail" let-item&gt;
        &lt;div class="p-grid p-nogutter p-justify-center"&gt;
            &lt;img [src]="item.thumbnailImageSrc" /&gt;
        &lt;/div&gt;
    &lt;/ng-template&gt;
&lt;/p-galleria&gt;
</app-code>

<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
export class GalleriaDemo &#123;
        
    images: any[];
        
    constructor(private photoService: PhotoService) &#123; &#125;

    responsiveOptions:any[] = [
        &#123;
            breakpoint: '1024px',
            numVisible: 5
        &#125;,
        &#123;
            breakpoint: '768px',
            numVisible: 3
        &#125;,
        &#123;
            breakpoint: '560px',
            numVisible: 1
        &#125;
    ];
    ngOnInit() &#123;
        this.photoService.getImages().then(images => this.images = images);
    &#125;
&#125;
</app-code>
        </p-tabPanel>
    </p-tabView>
</div>

